<template>
	<view class="user-application">
		<view v-if="Object.keys(channelInfo).length === 0">
			<view class="user-application-item flex-center-between">
				<view>
					<view class="tit">成为渠道商</view>
					<button class="btn" @click="application(1)">
						立即申请
					</button>
				</view>
				<image class="img" src="../../static/images/avatar-channel.png" mode="aspectFill"></image>
			</view>
			<view class="user-application-item flex-center-between">
				<view>
					<view class="tit">成为代理商</view>
					<button class="btn" @click="application(2)">
						立即申请
					</button>
				</view>
				<image class="img" src="../../static/images/avatar-agent.png" mode="aspectFill"></image>
			</view>
		</view>
		<view v-else>
			<view v-if="channelInfo.status === 0" class="channel-code">
				{{channelInfo.type === 1 ? '渠道商' : '代理商'}}申请已提交。请耐心等待···
			</view>
			<view v-if="channelInfo.status === 1" class="channel-code">
				申请成功！{{channelInfo.type === 1 ? '渠道码' : '代理码'}}：
				<text>{{channelInfo.channel_code}}</text>
			</view>
			<view v-if="channelInfo.status === 2" class="channel-code">
				{{channelInfo.type === 1 ? '渠道商' : '代理商'}}申请被驳回。
				驳回理由：{{channelInfo.remark ? channelInfo.remark : '无'}}
				<view class="submit-btn">
					<button class="apply-again" @click="applyAgain">重新申请</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				channelInfo: {},
			}
		},
		onLoad() {
			this.getChannelInfo()
		},
		methods: {
			/**
			 * 获取代理商与渠道商数据
			 */
			async getChannelInfo() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/channel/my',
					data: {}
				})
				if (res.status === 1) {
					if(res.data) {
						this.channelInfo = res.data
						uni.setStorageSync('CHANNEL_STATUS', res.data.status)
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 申请代理商or渠道商
			 * @param {Number} type
			 */
			async application(type) {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/channel/apply',
					data: { type: type }
				})
				if (res.status === 1) {
					uni.showToast({
						title: res.message,
						icon: 'success',
						duration: 3000
					})
					this.getChannelInfo()
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 重新申请
			 */
			applyAgain(){
				this.channelInfo = {}
			},
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			},
		}
	}
</script>

<style lang="scss">
	.user-application {
		padding: 50rpx 50rpx 0;
		&-item{
			width: 650rpx;
			height: 230rpx;
			margin-bottom: 50rpx;
			box-sizing: border-box;
			padding: 0 85rpx 0 50rpx;
			border-radius: 20rpx;
			background: $uni-bg-color;
			.tit{
				color: $uni-color-theme;
				font-size: $uni-font-size-lg2;
			}
			.btn{
				width: 180rpx;
				height: 58rpx;
				margin-top: 20rpx;
				line-height: 58rpx;
				border-radius: 29rpx;
				color: $uni-text-color-inverse;
				font-size: $uni-font-size-base;
				background: $uni-color-theme;
			}
			.img{
				width: 144rpx;
				height: 144rpx;
				border-radius: 50%;
			}
		}
		.channel-code{
			padding: 70rpx 50rpx 0;
			input{
				height: 104rpx;
				padding-left: 20rpx;
				background: $uni-bg-color;
				border-radius: $uni-border-radius-base;
			}
		}
	}
</style>
